<template>
    <div id="Answers">
        <div v-if="limts" class="jx-content s-part2" style="padding-top: 100px; height:450px; text-align:center;">
            <img src='../../../assets/images/noAsscess.png'/>
            <span style="display: block; padding: 15px 0; color: rgb(151, 151, 151);">暂无权限</span>
        </div>
       <div class="jx-content s-part2" v-else>
            <div class="topcoumt">
                <div class="search-box fl">
                    <el-form :inline="true"  :model="Form" class="fl">
                        <el-form-item label="关键字">
                            <el-input v-model="Form.name" placeholder="请输入关键字"></el-input>
                        </el-form-item>
                    </el-form>
                      <button class="button-style" @click="searchFn">搜 索</button>
                 </div>
            </div>
           <div v-if="listansers!=''">
                <div class="listanser">
                    <ul>
                        <li v-for='(item,index) in listansers' :key="index">
                            <div class="fl listanser-list">
                                <div class="fl listanser-list-answer">
                                    <p>{{item.problemCount}}</p>
                                    <p>回答</p>
                                </div>
                                <div class="fl imgpic">
                                    <img :src="item.icon">
                                </div>
                                <div class="fl question-list">
                                    <router-link :to="{path:'/Teaching/MyCourses/Swap/SMyAnswer/SMyAnswerDetail',query: {id:item.id}}">
                                        <p class="question-list-why">{{item.problemName}}</p>
                                        <div class="question-time">
                                            <div class="fl">
                                                <i class="iconfont  icon-wode"></i>
                                                <span class='stuname'>{{item.userName}}{{item.roleName}}</span>
                                            </div>
                                            <span class='timeicon'>
                                                <i class="iconfont  icon-shijian"></i>
                                                <span>{{item.problemTime}}</span>
                                            </span>
                                        </div>
                                    </router-link>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pagesize"
                layout="total, prev, pager, next, jumper"
                :total="totalCount">
               </el-pagination>
           </div>
           <div class="empty" v-else >
                 <img src='../../../assets/images/empty.png'/>
                <p>暂无数据</p>
           </div>
        </div>
    </div>
</template>

<script>
    import mavonEditor from "../../../components/mavonEditor";
    export default {
        props: ['websockMsg'],
        components: { mavonEditor },
        data () {
            return {
                //权限控制
                limts:'',
                //课程id
                courseId:'',
                Form:{
                    name:''
                },
                dialogVisible:false,
                formlist:{
                   title:''
                },
                listansers:[],
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,
                rules: {
                    name: [
                        { required: true, message: '请输入问题标题', trigger: 'blur' },
                    ]
                }
            }
        },
        created() {
            this.courseId = this.$localstorage.getLocalStorage('setCourseId')
            this.limts = this.$localstorage.getLocalStorage('limts')
            this.init()
            //消息通知执行
            //this.InitWebSocket()
        },
         destroyed: function() {
            //页面销毁时关闭长连接
            //this.over();
        },
        methods: {
             //通知webSocket
            InitWebSocket() {
                let self = this;
                let hostname = window.location.host;
                const wsuri = "ws://" + hostname + "/tes/ws/global";
                self.websock = new WebSocket(wsuri);
                self.websock.onopen = self.websocketonopen;
                self.websock.onmessage = self.websocketonmessage;
                self.over = () => {
                    self.websock.close();
                };
            },
              websocketonopen(){
                console.log('open sucess')
            },
             websocketonmessage(e) {
                //数据接收
                let self = this
                const redata = JSON.parse(e.data)
                if (redata.type == 20) {
                    //开启问题交流
                    self.limts = true
                } else if (redata.type == 21) {
                    //关闭问题交流
                    self.limts = false
                }
            },
            //初始化
            init() {
                let self = this
                self.$http.get('/tes/problemCommunication/listMyProblemReplyPages?pageNum='+self.currentPage +'&pageSize='+self.pagesize + '&courseId='+self.courseId+'&keyWords='+self.Form.name).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        //console.log(res.data.content)
                        self.listansers = res.data.content
                        self.totalCount = res.data.total
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //搜索
            searchFn(){
                this.currentPage = 1
                this.init()
            },
           //分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.init()
            },
        },
        watch: {
            'websockMsg': {
                handler: function(newval , oldval) {
                    let self = this
                    //console.log(newval)
                    if (newval.type == 20) {
                        //开启问题交流
                       self.limts = true
                       self.$localstorage.putLocalStorage('limts', true) //设置值
                    } else if (newval.type == 21) {
                        //关闭问题交流
                        self.limts = false
                         self.$localstorage.putLocalStorage('limts', false) //设置值
                    }
                }
            },
            deep: true
        }
    }
</script>
<style lang="scss">
 @import "./../../../styles/layout/color_variables";
    .s-part2{
        margin: 0
    }
  #Answers {
    width: $width;
    margin: 0px auto;
    color: #727272;
    .topcoumt{
       //border-bottom:1px solid #e8e8e8;
       overflow: hidden;
       .el-input .el-input__inner{
        width: 300px;
      }
    }
    .dialog-check{
       .el-form-item__content {
            .el-input__inner{
                width: 300px;
            }
        }
        .answer-editor{
            padding: 0 12px;
            .title{
                font-size: 14px;

                line-height: 30px;
            }
        }
        .btn-center{
            text-align: center;
            padding: 20px 0;
        }

    }
    .listanser{
        clear: both;
         ul>li{
            height: 60px;
            border-bottom:1px solid #e8e8e8;
            padding: 20px;
            &:hover{
                .question-list-why{
                    color:#2b85ed
                }
            }
            .question-list-why{
                margin-bottom: 12px;
                font-size: 16px;
                overflow: hidden;
                width: 600px;
                white-space: nowrap;
                text-overflow:ellipsis;
                color: #727272;

            }
             .Forbidden{
                margin-top: 13px;
                margin-right: 30px;
                .Forbidden-btn{
                    width: 65px;
                    height: 25px;
                    border: 1px solid #2b85ed;
                    border-radius: 20px;
                    color: #2b85ed;
                    cursor: pointer;
                }
                .Forbidden-btn-dark{
                     width: 65px;
                    height: 25px;
                    border: 1px solid #999999;
                    border-radius: 20px;
                    color: #999999;
                    cursor: pointer;

                }
           }
        }
        .listanser-list{
           padding-top: 10px;
           .listanser-list-answer{
               color: #2180ec;
               margin-right: 20px;
               margin-top: 10px;
               text-align: center;
                &>p{
                   font-size: $fs16;
                   margin-bottom:5px;
               }
           }
           .imgpic{
               margin-right: 20px;
               img{
                    border-radius: 50%;
                    width: 50px;
               }
           }
           .question-list{
               margin-top: 4px;
                .question-time{
                    color: #999999;
                    .stuname{
                        color: #999999;
                    }
                    .timeicon{
                        margin:0 10px;
                            .times{
                                color:$table-gray;
                            }
                    }
                    .teachername{
                        .teacher{
                            position: relative;
                            right: -25px;
                            color: #fff;
                            font-size: 14px;
                            font-weight: normal;
                            top: 1px;
                         }
                        #triangle-left{
                            width:0px;
                            height:0px;
                            border-top:12px solid transparent;
                            border-bottom:12px solid transparent;
                            border-right:16px solid $blue;
                            display:inline-block;
                            vertical-align: middle;
                                margin-left: -23px
                        }
                      .square{
                            width: 35px;
                            height: 24px;
                            background: $blue;
                            display: inline-block;
                            margin-left: -5px;
                            margin-bottom: 0px
                      }
                    }
                }
           }

        }
    }
        .empty{
           padding:100px 0;
           text-align:center;
            p{
                padding: 15px 0;
                color: #666
            }
        }

  }
</style>
